<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>监督考核</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="css/silver/pace-theme-loading-bar.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/animate.min.css">
  <link rel="stylesheet" href="./css/md-common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div style="opacity: 0" class="swiper-container pages-box">
  <section class="u-arrow-bottom">
    <div class="pre-wrap-bottom">
    </div>
  </section>
  <div id="audio_btn" class="off" style="display: block;">
    <div id="yinfu"></div>
    <audio loop="" src="./resource/kaohe.mp3" id="media" autoplay="autoplay" preload=""></audio>
  </div>
  <div class="swiper-wrapper">
    <div class="swiper-slide page1">
      <img class="logo ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s" style="width: 1.99rem" src="./images/1-logo.png" alt="">
      <img class="top-img ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s" style="width: 6.85rem" src="./images/1-top-img.png" alt="">
      <img class="look-mg-btn ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.8s" style="width: 2.21rem" src="./images/1-look-mg.png" alt="">
      <div class="" style="height: 7.80rem"></div>
      <div class="text-box">
        <p class="title ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="1s">
          互联网+党建时代 <br> 从严治党的重要性
        </p>
        <div style="width: 0.34rem;height: .34rem;margin:.1rem">
          <img class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s"
               swiper-animate-delay="1s" style="width: .34rem" src="./images/1-x-line.png" alt="">
        </div>
        <p class="desc ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="1.4s">
          顺应时代的新发展，新要求<br> 以信息化、网络化的方法推进从严治党<br> 营造扬清风、树正气的社会氛围
        </p>
      </div>
    </div>
    <div class="swiper-slide page2">
      <div class="top-box">
        <img class="centerimg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 6.39rem" src="./images/2-center-img.png" alt="">
        <img src="./images/2-top-bg.png" alt="">
      </div>
      <div class="bottom-text-box">
        <p class="title ani" swiper-animate-effect="rotateIn" swiper-animate-duration="2s"
           swiper-animate-delay="0.5s">大数据时代的选择</p>
        <div class="line ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
             swiper-animate-delay="1.2s"></div>
        <p class="desc ani" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.5s">基于大数据分析平台<br>深度挖掘党建数据资源<br>通过可视化图表的形式动态显示数据<br>对党员和各级党组织进行多维度精准画像</p>
      </div>
    </div>
    <div class="swiper-slide page3">
      <div class="top-box">
        <img class="page3-center-img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.5s" style="width: 5.23rem" src="./images/3-center-img.png" alt="">
        <img src="./images/2-top-bg.png" alt="">
        <img class="person ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay="1.5s" style="width: .7rem" src="./images/3-person.png" alt="">
        <img class="yun ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay=".5s" style="width: 4.06rem" src="./images/3-yun.png" alt="">
      </div>
      <div class="bottom-text-box">
        <p class="title ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.5s">监督考核功能概述</p>
        <div class="line ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
             swiper-animate-delay="1s"></div>
        <p class="desc ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.5s">专业化的系统及多样化的服务模式<br>
          建立党纪学习、纪检动态、党内通报、<br>
          党干考核、投票管理、监督信箱等多个功能<br>
          基于大数据、人工智能辅助决策的党建评价考核体系<br>
          推动监督考核工作具体化、程序化、制度化</p>
      </div>
    </div>
    <div class="swiper-slide page4">
      <div class="top-box">
        <img class="page4-yun ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 6.17rem" src="./images/4-yun.png" alt="">
        <img class="card ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay="0.5s" style="width: 4.27rem" src="./images/4-card.png" alt="">
        <img class="phone ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.5s" style="width: 4.53rem" src="./images/4-phone.png" alt="">
        <img class="icon-1 ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 0.7rem" src="./images/4-icon-1.png" alt="">
        <img class="icon-2 ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 0.32rem" src="./images/4-icon-2.png" alt="">
        <img class="icon-3 ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 0.51rem" src="./images/4-icon-3.png" alt="">
        <img class="icon-4 ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 0.58rem" src="./images/4-icon-4.png" alt="">
        <img class="icon-5 ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 0.65rem" src="./images/4-icon-5.png" alt="">
        <img src="./images/2-top-bg.png" alt="">
      </div>
      <div class="bottom-text-box">
        <p class="title ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="1s">推动考核评价体系化</p>
        <div class="line ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
             swiper-animate-delay="1.5s"></div>
        <p class="desc ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="1s">根据“四讲四有”合格党员考核标准<br>
          建立量化、透明化、多维度的考核体系<br>
          精确刻画组织及党员考核评价模型<br>
          实现考核评价科学化、展示形象化</p>
      </div>
    </div>
    <div class="swiper-slide page5">
      <div class="top-box">
        <img class="page5-center-img ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay=".3s" style="width: 7.33rem" src="./images/5-center-img.png" alt="">
        <img class="page5-yun ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width:2.65rem" src="./images/5-yun.png" alt="">
        <img src="./images/2-top-bg.png" alt="">
      </div>
      <div class="bottom-text-box">
        <p class="title ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.5s">纪检监察有序化</p>
        <div class="line ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
             swiper-animate-delay="1s"></div>
        <p class="desc ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.5s">制度管理、信访管理、案件管理、移动办公<br>
          覆盖党委、纪委、政府监察机关<br>
          多主体联动，综合治理、注重预防</p>
      </div>
    </div>
    <div class="swiper-slide page6">
      <div class="top-box">
        <img class="page6-center-img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay=".3s" style="width: 4.94rem" src="./images/6-center-img.png" alt="">
        <img class="page6-yun ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay=".3s" style="width:5.70rem" src="./images/6-yun.png" alt="">
        <img src="./images/2-top-bg.png" alt="">
      </div>
      <div class="bottom-text-box">
        <p class="title ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
           swiper-animate-delay="0.5s">掌上的“反腐利器”</p>
        <div class="line ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
             swiper-animate-delay="1s"></div>
        <p class="desc ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.5s">牵手互联网，赋予传统信访新模式<br>
          轻松生成二维码，在线举报更便捷<br>
          线上线下同进行，监督工作更严谨</p>
      </div>
    </div>
    <div class="swiper-slide page7">
      <div class="top-box-bg ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">
        <p class="title ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">联系试用</p>
        <div class="p7-line ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1s"></div>
      </div>
      <form class="page11-content ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
            swiper-animate-delay="0.3s">
        <div class="item ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s">
          <div class="flex-row flex-y-center"><img style="width: .39rem" src="./images/8-icon-1.png" alt="">单位名称</div>
          <input type="text" placeholder="请输入您所在的单位名称">
        </div>
        <div class="item ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.5s">
          <div class="flex-row flex-y-center"><img style="width: .37rem" src="./images/8-icon-2.png" alt="">党员人数</div>
          <input type="text" placeholder="请输入您所在单位的党员人数">
        </div>
        <div class="item ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.7s">
          <div class="flex-row flex-y-center"><img style="width: .38rem" src="./images/8-icon-3.png" alt="">联系人</div>
          <input type="text" placeholder="请输入您的姓名">
        </div>
        <div class="item ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.9s">
          <div class="flex-row flex-y-center"><img style="width: .33rem" src="./images/8-icon-4.png" alt="">联系方式</div>
          <input type="text" placeholder="请输入您的联系电话">
        </div>
        <button class="ani unse" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
                swiper-animate-delay="1.4s" type="submit">确认提交
        </button>
      </form>
    </div>
  </div>
</div>
<script src="./js/rem.js"></script>
<script src="./js/pace.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/swiper.min.js"></script>
<script src="./js/swiper.animate.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>

  window.onload = function () {
    Pace.on('hide', function () {
      $('.pages-box').css({opacity: 1})
    });
    $(document).ready(function () {
      var audio = document.getElementById('media');
      audio.play();
      if (audio.paused) {
        $('#audio_btn').removeClass('rotate')
      } else {
        $('#audio_btn').addClass('rotate')
      }
      ;
      document.addEventListener('WeixinJSBridgeReady', function () {
        audio.play();
        $('#audio_btn').addClass('rotate')
      }, false)
      $('#audio_btn').click(function () {
        if (audio.paused) {
          audio.play();
          $(this).addClass('rotate')
        } else {
          audio.pause();// 暂停
          $(this).removeClass('rotate')
        }

      })
    });
    var mySwiper = new Swiper('.pages-box', {
      direction: 'vertical', // 垂直切换选项
      loop: false, // 循环模式选项
      on: {
        init: function () {
          swiperAnimateCache(this); //隐藏动画元素
          swiperAnimate(this); //初始化完成开始动画
        },
        slideChangeTransitionEnd: function () {
          swiperAnimate(this); //每个slide切换结束时也运行当前slide动画

          if (this.activeIndex !== 6) {
            $('.u-arrow-bottom').show();
            if (this.activeIndex == 3) {
              $('.phone').removeClass('phoneAni').addClass('fadeInRight');
              setTimeout(function () {
                $('.phone').addClass('phoneAni');
              }, 2500);
            }
          } else {
            $('.u-arrow-bottom').hide();
          }

          //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
        }
      },
    });
  };
</script>
<script>
  $(function () {
    $("button[type='submit']").click(function (e) {
      e.preventDefault();
      console.log(1111);
    })
  })
</script>
<script>
  $(function () {
    var url = encodeURIComponent(window.location.href);
    var reulut;

    $.post('https://www.cloudcpc.com/share.php',
        {"url": url},
        function (result) {
          reulut = result;
          wx.config({
            debug: false,
            appId: reulut.appId, // 必填，公众号的唯一标识
            timestamp: reulut.timestamp, // 必填，生成签名的时间戳
            nonceStr: reulut.nonceStr, // 必填，生成签名的随机串
            signature: reulut.signature,// 必填，签名
            jsApiList: [ // 必填，需要使用的JS接口列表
              'onMenuShareAppMessage', //1.0 分享到朋友
              'onMenuShareTimeline', //1.0分享到朋友圈
              'updateAppMessageShareData', //1.4 分享到朋友
              'updateTimelineShareData' //1.4分享到朋友圈
            ]
          });

          wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
            wx.updateAppMessageShareData({
              title: '七一云党建“监督考核”平台', // 分享标题
              desc: '七一云党建，互联网+智慧党建新阵地', // 分享描述
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'https://www.cloudcpc.com/h5/dj-jiandukaohe/images/share-icon-jiandukaohe.png', // 分享图标
            });

            wx.updateTimelineShareData({
              title: '七一云党建“监督考核”平台', // 分享标题
              desc: '七一云党建，互联网+智慧党建新阵地', // 分享描述
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'https://www.cloudcpc.com/h5/dj-jiandukaohe/images/share-icon-jiandukaohe.png', // 分享图标
            });
          });

        }
    );
  })
</script>
</body>
</html>